<template>
  <div>
    <el-dialog :visible.sync="showPointDialog" :before-close="check" title="上线配置记录" width="75%">
      <el-alert
        title="若“产品上线状态”为“上线”，则第一条记录为当前线上配置"
        type="warning"
        show-icon
      />
      <div class="app-head">
        <el-form>
          <el-row>
            <el-col :span="11">
              <el-form-item label="申请时间" label-width="70px">
                <el-date-picker
                  v-model="applyStartTime"
                  :picker-options="pickerOptions1"
                  :editable="false"
                  type="datetime"
                  size="mini"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss   "
                  placeholder="选择开始时间"
                  class="timeLength"
                  @change="checkStartTime"
                />
                至
                <el-date-picker
                  v-model="applyEndTime"
                  :picker-options="pickerOptions2"
                  :editable="false"
                  type="datetime"
                  size="mini"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss   "
                  placeholder="选择结束时间"
                  class="timeLength"
                  @change="checkTime"
                />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="上线时间" label-width="70px">
                <el-date-picker
                  v-model="onlineStartTime"
                  :picker-options="pickerOptions3"
                  :editable="false"
                  type="datetime"
                  size="mini"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss   "
                  placeholder="选择开始时间"
                  class="timeLength"
                  @change="checkStartTime1"
                />
                至
                <el-date-picker
                  v-model="onlineEndTime"
                  :picker-options="pickerOptions4"
                  :editable="false"
                  type="datetime"
                  size="mini"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss   "
                  placeholder="选择结束时间"
                  class="timeLength"
                  @change="checkStartTime2"
                />
              </el-form-item>
            </el-col>
            <el-col :span="1" class="absolute main-button">
              <el-button
                size="mini"
                type="primary"
                round
                icon="el-icon-search"
                @click="loadList"
              >
                查询
              </el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="下线时间" label-width="70px">
                <el-date-picker
                  v-model="offlineStartTime"
                  :picker-options="pickerOptions5"
                  :editable="false"
                  type="datetime"
                  size="mini"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss   "
                  placeholder="选择开始时间"
                  class="timeLength"
                  @change="checkStartTime3"
                />
                至
                <el-date-picker
                  v-model="offlineEndTime"
                  :picker-options="pickerOptions6"
                  :editable="false"
                  type="datetime"
                  size="mini"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss   "
                  placeholder="选择结束时间"
                  class="timeLength"
                  @change="checkStartTime4"
                />
              </el-form-item>
            </el-col>
            <el-col :span="1" class="absolute main-button">
              <el-button
                size="mini"
                icon="el-icon-refresh"
                round
                @click="reset"
              >
                重置
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="app-table">
        <el-table :data="list" border style="width: 100%">
          <el-table-column label="申请时间">
            <template slot-scope="scope">
              <el-popover v-if="scope.row.applicationTime" :content="scope.row.applicationTime" placement="top" trigger="hover">
                <span slot="reference" style="cursor:pointer">{{ scope.row.applicationTime }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="上线时间">
            <template slot-scope="scope">
              <el-popover v-if="scope.row.reviewTime" :content="scope.row.reviewTime" placement="top" trigger="hover">
                <span slot="reference" style="cursor:pointer">{{ scope.row.reviewTime }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="下线时间">
            <template slot-scope="scope">
              <el-popover v-if="scope.row.offlineTime" :content="scope.row.offlineTime" placement="top" trigger="hover">
                <span slot="reference" style="cursor:pointer">{{ scope.row.offlineTime }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="发起审核人">
            <template slot-scope="scope">
              <el-popover v-if="scope.row.originator" :content="scope.row.originator" placement="top" trigger="hover">
                <span slot="reference" style="cursor:pointer">{{ scope.row.originator }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="审核通过人">
            <template slot-scope="scope">
              <el-popover v-if="scope.row.reviewer" :content="scope.row.reviewer" placement="top" trigger="hover">
                <span slot="reference" style="cursor:pointer">{{ scope.row.reviewer }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                round
                size="mini"
                @click="detail(scope.row.productNo)"
              >详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination :current-page="pageid" :page-sizes="[20,50,100]" :page-size="pagecount" :total="count" background highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </el-dialog>
    <detail-pro :detail-dialog="detailDialog" :pro-id="proId" :product-no="productNo" :status-detail="true" :key-id="keyId" @closeWatch="closeWatch" />
  </div>
</template>

<script>
import { getUpVersion } from '@/api/product.js'
import detailPro from './detailPro.vue'
export default {
  name: 'Watch',
  components: {
    detailPro: detailPro
  },
  props: {
    versionDialog: {
      type: Boolean,
      default: false
    },
    readId: {
      type: String,
      default: '0'
    },
    versionId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: [],
      keyId: '0',
      productNo: '',
      proId: '0',
      showPointDialog: false, // 遮罩
      remark: '', // 备注
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions3: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions4: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions5: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions6: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      offlineStartTime: '', // 下线开始时间
      offlineEndTime: '', // 下线结束时间
      onlineStartTime: '', // 申请开始时间
      onlineEndTime: '', // 申请结束时间
      applyStartTime: '', // 申请开始时间
      applyEndTime: '', // 申请结束时间
      flag: true,
      detailDialog: false,
      statuss: false,
      pageid: 1, // 当前页数
      pagecount: 20, // 每页可显示条数
      count: 0 // 总数量
    }
  },
  watch: {
    versionDialog(newVal) {
      this.showPointDialog = newVal
      this.keyId = this.readId
      this.proId = this.versionId
      this.loadList(this.versionId)
    }
  },
  methods: {
    detail(productNo) {
      this.detailDialog = true
      this.productNo = productNo
    },
    loadList(versionId) {
      this.pageid = 1
      const data = {
        productId: this.versionId,
        onlineStartTime: this.onlineStartTime,
        onlineEndTime: this.onlineEndTime,
        applyStartTime: this.applyStartTime,
        applyEndTime: this.applyEndTime,
        offlineStartTime: this.offlineStartTime,
        offlineEndTime: this.offlineEndTime,
        pageid: 1,
        pagecount: 20
      }
      getUpVersion(data).then(res => {
        if (res.resultCode === '0000') {
          this.list = res.data.list
          this.count = parseInt(res.data.count) // 总数量
          /* if (this.list.length > 0) {
            this.pageid = parseInt(res.data.list[0].pageid) // 当前页数
          } */
          this.statuss = true
        }
      })
    },
    closeWatch() {
      this.detailDialog = false
    },
    reset() {
      this.onlineStartTime = ''
      this.onlineEndTime = ''
      this.applyStartTime = ''
      this.applyEndTime = ''
      this.offlineStartTime = ''
      this.offlineEndTime = ''
    },
    // 回调父组件
    check() {
      this.showPointDialog = false
      this.$emit('closeVersion')
      this.reset()
    },
    // 校验开始时间
    checkStartTime(time) {
      const reg = new RegExp('-', 'g')
      // 比较是否大于现在的时间
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.applyStartTime = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var end
          if (this.applyEndTime !== null) {
            end = new Date(this.applyEndTime.replace(reg, '/')).getTime()
          } else {
            end = ''
          }
          var first = new Date(time.replace(reg, '/')).getTime()
          if (!!end && first > end) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.applyStartTime = ''
          }
        }
      }
    },
    // 校验开始时间
    checkStartTime1(time) {
      const reg = new RegExp('-', 'g')
      // 比较是否大于现在的时间
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.onlineStartTime = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var end
          if (this.onlineEndTime !== null) {
            end = new Date(this.onlineEndTime.replace(reg, '/')).getTime()
          } else {
            end = ''
          }
          var first = new Date(time.replace(reg, '/')).getTime()
          if (!!end && first > end) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.onlineStartTime = ''
          }
        }
      }
    },
    // 校验结束时间1
    checkStartTime2(time) {
      const reg = new RegExp('-', 'g')
      // console.log(newStr)
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.onlineEndTime = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var start
          if (this.applyStartTime !== null) {
            start = new Date(this.applyStartTime.replace(reg, '/')).getTime()
          } else {
            start = ''
          }
          var end = new Date(time.replace(reg, '/')).getTime()
          if (end < start) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.onlineEndTime = ''
          }
        }
      }
    },
    // 校验开始时间
    checkStartTime3(time) {
      const reg = new RegExp('-', 'g')
      // 比较是否大于现在的时间
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.offlineStartTime = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var end
          if (this.offlineEndTime !== null) {
            end = new Date(this.offlineEndTime.replace(reg, '/')).getTime()
          } else {
            end = ''
          }
          var first = new Date(time.replace(reg, '/')).getTime()
          if (!!end && first > end) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.offlineStartTime = ''
          }
        }
      }
    },
    // 校验开始时间
    checkStartTime4(time) {
      const reg = new RegExp('-', 'g')
      // 比较是否大于现在的时间
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.startDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var end
          if (this.endDate !== null) {
            end = new Date(this.endDate.replace(reg, '/')).getTime()
          } else {
            end = ''
          }
          var first = new Date(time.replace(reg, '/')).getTime()
          if (!!end && first > end) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.startDate = ''
          }
        }
      }
    },
    // 校验开始时间
    checkStartTime5(time) {
      const reg = new RegExp('-', 'g')
      // 比较是否大于现在的时间
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.startDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var end
          if (this.endDate !== null) {
            end = new Date(this.endDate.replace(reg, '/')).getTime()
          } else {
            end = ''
          }
          var first = new Date(time.replace(reg, '/')).getTime()
          if (!!end && first > end) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.startDate = ''
          }
        }
      }
    },
    // 校验结束时间
    checkTime(time) {
      const reg = new RegExp('-', 'g')
      // console.log(newStr)
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.applyEndTime = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var start
          if (this.applyStartTime !== null) {
            start = new Date(this.applyStartTime.replace(reg, '/')).getTime()
          } else {
            start = ''
          }
          var end = new Date(time.replace(reg, '/')).getTime()
          if (end < start) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.applyEndTime = ''
          }
        }
      }
    },
    handleSizeChange(num) {
      this.flag = false
      const request = {
        productId: this.versionId,
        onlineStartTime: this.onlineStartTime,
        onlineEndTime: this.onlineEndTime,
        applyStartTime: this.applyStartTime,
        applyEndTime: this.applyEndTime,
        offlineStartTime: this.offlineStartTime,
        offlineEndTime: this.offlineEndTime,
        pageid: 1, // 当前页数
        pagecount: num // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      getUpVersion(request).then(res => {
        this.list = res.data.list // 列表项
        this.count = parseInt(res.data.count) // 总数量
        this.pageid = 1
        this.pagecount = num
        this.flag = true
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
    },

    // 跳转某页
    handleCurrentChange(num) {
      console.log(num)
      this.pageid = num // 当前页数
      const request = {
        productId: this.versionId,
        onlineStartTime: this.onlineStartTime,
        onlineEndTime: this.onlineEndTime,
        applyStartTime: this.applyStartTime,
        applyEndTime: this.applyEndTime,
        offlineStartTime: this.offlineStartTime,
        offlineEndTime: this.offlineEndTime,
        pageid: num, // 当前页数
        pagecount: this.pagecount // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      // if (this.flag === true) {
      getUpVersion(request).then(response => {
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        console.log('返回数据')
        console.log(response.data)
      })
      // }
    }
  }
}
</script>

<style scoped>
.timeLength{
  width: 40% !important;
}
.main-button{
  right: 50px;
}
</style>

